<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/bank/personalBank' }">我的题库</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="subjectTitle">
      <el-collapse style="margin-left: 5%;" v-model="activeNames" @change="handleChange">
        <el-collapse-item title="筛选题库" name="1">
          <div class="check-box">科目：
            <el-radio-group v-model="searchForm.subjectId">
              <el-radio v-for="item in subjects"
                        :key="item.id"
                        :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <div class="check-box">状态：
            <el-radio-group v-model="searchForm.status">
              <el-radio v-for="item in allStatus"
                        :key="item.value"
                        :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </div>
          <el-link type="info" @click="clearSearch">清空</el-link>
        </el-collapse-item>
      </el-collapse>
      <el-button type="primary" style="margin-left:10%; width: 80%; height: 50px;" @click="search">搜索题库</el-button>
      <el-button type="primary" style="margin-left:10%; width: 80%; height: 50px;" @click="addDialogVisible = true">增加题库</el-button>
    </div>
    <div style="width: 90%; margin-left: 5%; margin-top: 10px;">
      <el-table
        :data="bankList"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="科目"
          width="130">
        </el-table-column>
        <el-table-column
          label="题库状态"
          width="130">
          <template slot-scope="scope">
            <span>{{transferStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope" style="display: grid; grid-template-columns: 33% 33% 33%">
            <el-link type="info" @click="goToQuestion(scope.row.id, scope.row.name, scope.row.subject, scope.row.status)">进入题库</el-link>
            <el-link type="danger" @click="deleteDialogVisible = true">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="total, prev, pager, next"
          :page-size="pagination.page_size"
          :current-page="pagination.index"
          :total="pagination.total"
          @current-change="changePage">
        </el-pagination>
      </div>
    </div>

    <!--  添加题库  -->
    <el-dialog
      title="添加新题库"
      :visible.sync="addDialogVisible"
      width="50%"
      center
      :before-close="handleClose">
      <el-form :model="bankAdd" ref="addBank" label-width="100px" label-position="left">
        <el-form-item label="题库名称">
          <el-input v-model="bankAdd.name"></el-input>
        </el-form-item>
        <el-form-item label="选择科目">
          <el-select v-model="bankAdd.subjectId" placeholder="请选择科目">
            <el-option
              v-for="item in subjects"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm()">重 置</el-button>
          <el-button type="primary" @click="addBank()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { findBankSearch, findSubjectsByHouse, postNewBank, findBankByTeacher } from '../../../api/questionBank.js'

export default {
  name: 'PersonalBank',
  data () {
    return {
      // 分页信息
      pagination: {
        page_size: 5,
        index: 1,
        total: 100
      },
      // 筛选条件
      activeNames: [],
      searchForm: {
        subjectId: null,
        status: null
      },
      allStatus: [
        {
          value: 0,
          name: '未发布'
        },
        {
          value: 1,
          name: '待审核'
        },
        {
          value: 2,
          name: '已审核'
        }
      ],
      // 增加题库
      addDialogVisible: false,
      bankAdd: {
        name: '',
        subjectId: '',
        status: 0,
        createTime: '',
        updateTime: '',
        teacherId: 0
      },
      subjects: [],
      // 表格显示
      bankList: [
        {
          id: 1,
          name: '2022计算机网络练习题',
          subject: '计算机网络',
          status: 0,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        },
        {
          id: 2,
          name: '2022计算机网络期末复习题',
          subject: '计算机网络',
          status: 1,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        },
        {
          id: 3,
          name: '2022计算机网络期末复习题',
          subject: '计算机网络',
          status: 2,
          createTime: '2022-3-12 12:00:00',
          updateTime: '2022-3-14 12:00:00'
        }
      ]
    }
  },
  mounted () {
    this.getBanksByTeacher()
    this.getSubjectByHouse()
  },
  methods: {
    // 获取该老师的全部题库
    getBanksByTeacher () {
      let parameters = {
        index: this.pagination.index - 1,
        page_size: this.pagination.page_size,
        teacherId: sessionStorage.getItem('teacherId')
      }
      findBankByTeacher(parameters).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.bankList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 翻页
    changePage (val) {
      this.pagination.index = val
      this.getBanksByTeacher()
    },
    transferStatus (status) {
      switch (status) {
        case 0: return '未发布'
        case 1: return '待审核'
        case 2: return '已审核'
        default: return '错误'
      }
    },
    // 前往题库中的题目页面
    goToQuestion (id, name, subject, status) {
      console.log(id)
      this.$router.push({path: '/bank/personalQuestion', query: {id: id, name: name, subject: subject, status: status}})
    },
    // 增加题库
    addBank () {
      // 发送请求
      const newBank = {
        name: this.bankAdd.name,
        subjectId: this.bankAdd.subjectId,
        teacherId: sessionStorage.getItem('teacherId')
      }
      postNewBank(newBank).then(res => {
        if (res.data.errorCode === 0) {
          this.$message({
            message: '增加题库成功！',
            type: 'success'
          })
          this.addDialogVisible = false
          this.resetForm()
          this.getBanksByTeacher()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    resetForm () {
      this.bankAdd = {}
    },
    handleClose () {
      this.resetForm()
      this.addDialogVisible = false
    },
    // 获取科目
    // 通过学院获取科目
    getSubjectByHouse () {
      findSubjectsByHouse(sessionStorage.getItem('teacherHouse')).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.subjects = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 搜索
    handleChange (val) {
      console.log(val)
    },
    // 搜索
    clearSearch () {
      this.searchForm = {
        subjectId: null,
        status: null
      }
      this.getBanksByTeacher()
    },
    search () {
      this.pagination = {
        page_size: 5,
        index: 1,
        total: 100
      }
      let parameter = {
        page_size: this.pagination.page_size,
        index: this.pagination.index - 1,
        subjectId: this.searchForm.subjectId,
        status: this.searchForm.status,
        teacherId: sessionStorage.getItem('teacherId')
      }
      findBankSearch(parameter).then(res => {
        if (res.data.errorCode === 0) {
          console.log(res.data)
          this.bankList = res.data.data.list
          this.pagination.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .subjectTitle {
    font-size: 16px;
    font-weight: bold;
    margin: 0 20px;
    display: grid;
    grid-template-columns: 80% 10% 10%;
  }

  .check-box {
    margin-bottom: 5px;
    text-align: left;
  }
</style>
